<template>
<!--  <view class="container">-->
  <view class="container-editor">
    <view class="page-body">
      <view class='wrapper'>
        <!--        <view class='toolbar' @tap="format" style="height: 120px;overflow-y: auto;">-->

        <!--        <u-sticky offset-top="100rpx">-->
        <view class='toolbar' @tap="format" style="overflow-y: auto;">
          <view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold">
          </view>
          <view :class="formats.italic ? 'ql-active' : ''" class="iconfont icon-zitixieti" data-name="italic">
          </view>
          <view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian"
                data-name="underline"></view>
          <view :class="formats.strike ? 'ql-active' : ''" class="iconfont icon-zitishanchuxian"
                data-name="strike"></view>
          <!-- #ifndef MP-BAIDU -->
          <view :class="formats.align === 'left' ? 'ql-active' : ''" class="iconfont icon-zuoduiqi"
                data-name="align" data-value="left"></view>
          <!-- #endif -->
          <view :class="formats.align === 'center' ? 'ql-active' : ''" class="iconfont icon-juzhongduiqi"
                data-name="align" data-value="center"></view>
          <view :class="formats.align === 'right' ? 'ql-active' : ''" class="iconfont icon-youduiqi"
                data-name="align" data-value="right"></view>
          <view :class="formats.align === 'justify' ? 'ql-active' : ''" class="iconfont icon-zuoyouduiqi"
                data-name="align" data-value="justify"></view>
          <!-- #ifndef MP-BAIDU -->
          <view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-line-height"
                data-name="lineHeight" data-value="2"></view>
          <view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-Character-Spacing"
                data-name="letterSpacing" data-value="2em"></view>
          <view :class="formats.marginTop ? 'ql-active' : ''" class="iconfont icon-722bianjiqi_duanqianju"
                data-name="marginTop" data-value="20px"></view>
          <view :class="formats.marginBottom ? 'ql-active' : ''" class="iconfont icon-723bianjiqi_duanhouju"
                data-name="marginBottom" data-value="20px"></view>
          <!-- #endif -->

          <view class="iconfont icon-clearedformat" @tap="removeFormat"></view>

          <!-- #ifndef MP-BAIDU -->
          <!-- 					<view :class="formats.fontFamily ? 'ql-active' : ''" class="iconfont icon-font"
                      data-name="fontFamily" data-value="Pacifico"></view> -->
          <view :class="formats.fontSize === '24px' ? 'ql-active' : ''" class="iconfont icon-fontsize"
                data-name="fontSize" data-value="24px"></view>
          <!-- #endif -->
          <view :class="formats.color === '#0000ff' ? 'ql-active' : ''" class="iconfont icon-text_color"
                data-name="color" data-value="#0000ff"></view>
          <view :class="formats.backgroundColor === '#00ff00' ? 'ql-active' : ''"
                class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#00ff00"></view>
          <view class="iconfont icon-date" @tap="insertDate"></view>
          <view class="iconfont icon--checklist" data-name="list" data-value="check"></view>
          <view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie"
                data-name="list" data-value="ordered"></view>
          <view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie"
                data-name="list" data-value="bullet"></view>

          <view class="iconfont icon-undo" @tap="undo"></view>
          <view class="iconfont icon-redo" @tap="redo"></view>

          <view class="iconfont icon-outdent" data-name="indent" data-value="-1"></view>
          <view class="iconfont icon-indent" data-name="indent" data-value="+1"></view>
          <view class="iconfont icon-fengexian" @tap="insertDivider"></view>
<!--          <view class="iconfont icon-charutupian" @tap="insertImage"></view>-->
          <view :class="formats.header === 1 ? 'ql-active' : ''" class="iconfont icon-format-header-1"
                data-name="header" :data-value="1"></view>
          <view :class="formats.script === 'sub' ? 'ql-active' : ''" class="iconfont icon-zitixiabiao"
                data-name="script" data-value="sub"></view>
          <view :class="formats.script === 'super' ? 'ql-active' : ''" class="iconfont icon-zitishangbiao"
                data-name="script" data-value="super"></view>

          <view class="iconfont icon-shanchu" @tap="clear"></view>

          <view :class="formats.direction === 'rtl' ? 'ql-active' : ''" class="iconfont icon-direction-rtl"
                data-name="direction" data-value="rtl"></view>
        </view>
        <!--        </u-sticky>-->

        <view class="editor-wrapper">
          <editor :adjust-position="false" id="editor" class="ql-container" placeholder="开始输入..." show-img-size show-img-toolbar
                  show-img-resize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady" @blur="blur">
          </editor>
<!--          <view class="" style="text-align: center;margin-bottom: 30rpx;">
            <u-button style="" type="primary"    size="medium">发布</u-button>

            &lt;!&ndash; <view class="" v-html="info">

            </view> &ndash;&gt;
          </view>-->
        </view>


      </view>
    </view>
  </view>
</template>


<script>
// import quill from "quill";
export default {
  props: {
    // info: {
    //   type: String,
    //   default: '',
    // },
  },
  data() {
    return {
      title: 'Hello',
      readOnly: false,
      formats: {},
      info:''
    }
  },
  onLoad() {
  },
  watch: {

    //监听info变化
    info(){
      this.$emit("update:info", this.info)
    }
  },
  methods: {
    blur(e){
      this.info=e.detail.html
      console.log(this.info,e,'失去焦点')
    },
    readOnlyChange() {
      this.readOnly = !this.readOnly
    },
    onEditorReady() {
      // #ifdef MP-BAIDU
      this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
      // #endif

      // #ifdef APP-PLUS || H5
      uni.createSelectorQuery().select('#editor').context((res) => {
        this.editorCtx = res.context
      }).exec()
      // #endif


      // #ifdef MP-WEIXIN
      //因为使用的是组件方式这里 在微信小程序下使用 this | 如果页面是用 wx ; 具体自己没有测试
      this.createSelectorQuery().select('#editor').context((res) => {
        this.editorCtx = res.context
      }).exec()
      // #endif
    },
    undo() {
      this.editorCtx.undo()
    },
    redo() {
      this.editorCtx.redo()
    },
    format(e) {
      let {
        name,
        value
      } = e.target.dataset
      if (!name) return
      // console.log('format', name, value)
      this.editorCtx.format(name, value)
    },
    onStatusChange(e) {
      const formats = e.detail
      this.formats = formats
    },
    insertDivider() {
      this.editorCtx.insertDivider({
        success: function() {
          console.log('insert divider success')
        }
      })
    },
    clear() {
      uni.showModal({
        title: '清空编辑器',
        content: '确定清空编辑器全部内容？',
        success: res => {
          if (res.confirm) {
            this.editorCtx.clear({
              success: res => {
                this.info = "";
                console.log("clear success")
              }
            })
          }
        }
      })
    },
    removeFormat() {
      this.editorCtx.removeFormat()
    },
    insertDate() {
      const date = new Date()
      const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
      this.editorCtx.insertText({
        text: formatDate
      })
    },
    insertImage() {
      uni.chooseImage({
        count: 1,
        success: (res) => {
          this.editorCtx.insertImage({
            src: res.tempFilePaths[0],
            alt: '图像',
            success: function() {
              console.log('insert image success')
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
/*@import "./editor-icon.css";*/

/* @import "../../static/editor/assets/editor.css" */
@import "@/static/css/editor/editor.css" ;
.page-body {
  /*height: calc(100vh - var(--window-top) - var(--status-bar-height));*/
}

.wrapper {
  /*height: 100%;*/
  display: flex;
  flex-direction: column;
  /*justify-content: space-between;*/
}

.editor-wrapper {
  /*height: calc(100vh - var(--window-top) - var(--status-bar-height) - 140px);*/
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.iconfont {
  display: inline-block;
  padding: 26rpx 26rpx;
  width: 80rpx;
  height:80rpx;
  cursor: pointer;
  font-size: 20px;
}

.toolbar {
  box-sizing: border-box;
  border-bottom: 0;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}

.ql-container {
  flex:1;
  box-sizing: border-box;
  padding: 12px 15px;
  width: 100%;
  min-height: 30vh;
  /* height: auto; */
  /* height: 80%; */
  margin-top: 20px;
  font-size: 16px;
  line-height: 1.5;

}

.ql-active {
  color: #06c;
}

/*追加css */

.iconfont {
  padding: 8px 8px !important;
  width: unset;
  height: unset;
  cursor: pointer;
  font-size: unset;
}

</style>
